<template>
  <div>
    <div class="recommand-title">
      周末去哪儿
    </div>
    <ul>
      <router-link
        tag="li"
        class="list-item"
        to="/detail"
        v-for="item of weekendList"
        :key="item.id"
      >
        <div class="item-img">
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="item-info">
          <div class="info-title">{{item.title}}</div>
          <div class="info-comment">{{item.comment}}</div>  
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HomeWeekend",
  props: ["weekendList"],
  data() {
    return {
     //weekendList[{},{},{}]
    };
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl';
@import '~styles/mixins.styl';

.recommand-title {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: .28rem;
  padding: 0 .2rem;
  background-color: #EEE;
}

.list-item .item-img {
  width: 100%;
  height: 0;
  padding-bottom: 37.1%;
}

.list-item .item-img img {
  width: 100%;
}

.list-item .item-info {
  padding: .14rem .3rem .2rem;
}

.list-item .item-info .info-title {
  width: 100%;
  height: 0.48rem;
  line-height: 0.48rem;
  font-size: 0.28rem;
  color: $darkTxtColor;
  ellipsis();
}

.list-item .item-info .info-comment {
//    width: 100%;
   height: 0.42rem;
   color: $lightTxtColor;
   line-height: 0.3rem;
   font-size: 0.24rem;
   padding-right: 1.4rem;
   ellipsis();
}
</style>







